<template>
  <div class="root">
    <MyHeader :nature="nature"></MyHeader>
    <component :is="toggleName"></component>
    <MyTabBar :tabList="tabList" @toggle="toggle"></MyTabBar>
  </div>
</template>

<script>
import MyHeader from "@/components/MyHeader"
import MyTabBar from "@/components/MyTabBar"
import MyTable from "@/components/MyTable"
import MyGoodsList from '@/views/MyGoodsList'
import MyGoodsSearch from '@/views/MyGoodsSearch'
import MyUserInfo from '@/views/MyUserInfo'
import './assets/fonts/iconfont.css'
export default {
  data(){ 
    return{
      nature:{
        bgc:"skyblue",
        color:"black",
        title:"标题"
      },
      tabList: [
    {
        iconText: "icon-shangpinliebiao",
        text: "商品列表",
        componentName: "MyGoodsList"
    },
    {
        iconText: "icon-sousuo",
        text: "商品搜索",
        componentName: "MyGoodsSearch"
    },
    {
        iconText: "icon-user",
        text: "我的信息",
        componentName: "MyUserInfo"
    }
      ],
      toggleName:"MyGoodsList"
  }
  },
  components:{
    MyHeader,
    MyTabBar,
    MyTable,
    MyGoodsList,
    MyGoodsSearch,
    MyUserInfo
  },
  methods:{
    toggle(val){
      this.toggleName=val
    }
  }

}
</script>

<style>
.root{
  padding-top:45px ;
}
</style>